import React from 'react'
import {Menu, Button, Dropdown, Input, Row, Col, DatePicker, message} from 'antd';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import axios from 'axios'
import './css/ProductsList.css'
import { Table } from 'antd';
import {Link,withRouter} from 'react-router-dom'
import locale from 'antd/lib/date-picker/locale/zh_CN'

const {Search} = Input
const { RangePicker } = DatePicker;

const menu = (
    <Menu>
        <Menu.Item key="1">
            <UserOutlined />
            全部仓库
        </Menu.Item>
        <Menu.Item key="2">
            <UserOutlined />
            成都仓
        </Menu.Item>
        <Menu.Item key="3">
            <UserOutlined />
            深圳仓
        </Menu.Item>
    </Menu>
);

const pageNation = {
    position:['bottomRight'],
    pageSize:10,
    size:'small',
    total:7,
    showQuickJumper:true,
    backgroundColor:'#4BD0B6',
}

class ProductsList extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            selectedRowKeys: [],
            loading: false,
            data:[]
        }
    }

    selectType=(e)=>{
        let data = ['全部类型','采购入库','采购退货','调拨入库','其他入库']
        let index = e.key-1
        let selectValue = data[index]
        axios({
            url:'/api/goods/selectWarehousingRecordByCondition',
            method:'post',
            data:{selectValue:selectValue,currentPage:1,perSize:7}
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.goodsId
                delete item.goodsId
                return item
            })
            this.setState({
                data:data
            })
        })
    }
    menu2 = (
        <Menu onClick={this.selectType}>
            <Menu.Item key="1">
                <UserOutlined />
                全部类型
            </Menu.Item>
            <Menu.Item key="2">
                <UserOutlined />
                采购入库
            </Menu.Item>
            <Menu.Item key="3">
                <UserOutlined />
                采购退货
            </Menu.Item>
            <Menu.Item key="4">
                <UserOutlined />
                调拨入库
            </Menu.Item>
            <Menu.Item key="5">
                <UserOutlined />
                其他入库
            </Menu.Item>
        </Menu>
    );
    toDetalis(text){
        let data = this.state.data
        data.map(item=>{
            if(item.key===text||item.name===text){
                this.props.history.push({pathname:'/homepage/productsdetails',query:item})
                return item
            }
        })
    }
    toAddToDepot(){
        this.props.history.push('/homepage/addtodepot')
    }
    columns = [
        {
            title: '单号',
            dataIndex: 'key',
            align:'center',
        },
        {
            title: '入库日期',
            dataIndex: 'date',
            align:'center',
        },
        {
            title: '所属仓库',
            key:'key',
            render:record=><span>{record.repository.repositoryName}</span>,
            align:'center',
        },
        {
            title: '类型',
            dataIndex: 'stockInOutType',
            align:'center'
        },
        {
            title: '制单人',
            dataIndex: 'creator',
            align:'center'
        },
    ];

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    searchById=(id)=>{
        if(!id){
            message.warning('请输入您要搜索的内容')
        }else {
            axios({
                url:'/api/goods/selectWarehousingRecordByCondition',
                method:'post',
                data:{inputValue:id,currentPage:1,perSize:7}
            }).then(res=>{
                console.log(res)
                // let data = res.data.data.filter((item)=>{
                //     item.key = item.goodsId
                //     delete item.goodsId
                //     return item
                // })
                // this.setState({
                //     data:data
                // })
            })
        }
    }
    render() {
        let data = this.state.data;
        let columns = this.columns;
        const { loading, selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const hasSelected = selectedRowKeys.length > 0;
        return (
            <div id='headContent'>
                <Row id='orderListHead'>
                    <Col id='leftCol' span={12}>
                        <Dropdown overlay={menu}>
                            <Button>
                                全部仓库 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Dropdown overlay={this.menu2}>
                            <Button id='mySelect'>
                                全部类型 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <RangePicker locale={locale} size='default'/>
                        <Search style={{marginLeft:'15px'}} onSearch={value => this.searchById(value)} id='myInput'  placeholder="请输入..." />
                    </Col>
                    <Col id='rightCol' span={12}>
                        <Button id='myBtn' type="primary" onClick={this.toAddToDepot.bind(this)}>新增</Button>
                    </Col>
                </Row>
                <Row>
                    <Table id='myTable' pagination={pageNation} rowSelection={rowSelection} columns={columns} dataSource={data} />
                </Row>
            </div>
        );
    }
    componentDidMount() {
        axios({
            url:'/api//goods/selectAllWarehousingRecord',
            method:'post',
            data:{currentPage:1,perSize:7}
        }).then(res=>{
            let data = res.data.data.filter((item)=>{
                item.key = item.warehousingRecordMainId
                delete item.warehousingRecordMainId
                if(item.repository===null){
                    item.repository = {repositoryName:'未知'}
                }
                return item
            })
            this.setState({
                data:data
            })
            console.log(data)
        })
    }
}

export default withRouter(ProductsList)